<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link  type="text/css" href="css/jquery-ui.css" rel="stylesheet"></link>
<style type="text/css">
  /* tabs class */
  .ui-tabs-vertical {}
  .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
  .ui-tabs-vertical .ui-tabs-nav>li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
  .ui-tabs-vertical .ui-tabs-nav>li>a { display:block; width: 100%;}
  .ui-tabs-vertical .ui-tabs-nav>li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
  .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: left; width: 300px; }
  
  /* list class */
  .cities .ui-selecting { background: #FECA40; }
  .cities .ui-selected { background: #F39814; color: white; }
  .cities { list-style-type: none; margin: 0; padding: 0; width: 450px; }
  .cities>li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px;text-align: center; }
  
  
    .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display:table;}
	.ui-helper-clearfix:after { clear: both; }
	.ui-helper-clearfix { zoom: 1; }
  /* page */
  #pageContent{
  	border: 1px solid #ff0000 ;
  	width:1000px ;
  	height:800px ;
  	display:block;
  	overflow:hidden;
  }
  #leftTree{
  	border: 1px solid #ff0000 ;
  	width:600px ;
  	height:600px ;
  	display:inline;
  	float:left ;
  	overflow:hidden;
  }
  #leftTree:after {
  	display: inline;
  	clear: both ;
  }
  .provinceTree{
  	width:700px;
  	display:block;
  }
  #detailDiv{
  	border: 1px solid #BBAAAA ;
  	width:200px ;
  	display: inline;
  	clear:both;
  	position:relative;
  }
  
</style>
<script type="text/javascript" src="js/jquery.js" charset="GBK"></script>
<script type="text/javascript" src="js/jquery-ui-10.js" charset="GBK"></script>
<script type="text/javascript" src="js/treeUpdate.js" charset="GBK"></script>
</head>
<body>
	<div id='pageContent' >
		<!-- left tree -->
		  <div id='leftTree'>
			<div id = 'provinceTree' >
				<ol>
					<li ><a href ='#provinceCode1'>河北</a></li>		
					<li ><a href ='#provinceCode2'>山东</a></li>		
					<li ><a href ='#provinceCode3'>浙江</a></li>		
				</ol>
				<div id='provinceCode1'>
					<ol class='cities'>
						<li>廊坊</li>
					</ol>
				</div>
				<div id='provinceCode2'>
					<ol class='cities'>
						<li>承德</li>
					</ol>
				</div>
				<div id='provinceCode3'>
					<ol class='cities'>
						<li>杭州</li>
					</ol>
				</div>
			</div><!-- end provinceTree -->
		  </div>
		<!-- right detail -->
		<div id="detailDiv" >
		aaaaaaaaaaaaaa
		</div>
	</div><!-- end pageContener -->
	<button onClick='javascript:test()'>test</button>
	<button onClick='javascript:show()'>show</button>
	<button onClick='javascript:call()'>call</button>
</body>
</html>